<template>
    <el-button type="primary" :disabled="loadingBtnFlag" @click="getCodeBtn">{{ btnText }}</el-button>
</template>
<script setup>
const loadingBtnFlag = ref(false)
const btnText = ref('获取验证码')
const timeOut = ref(60)
let timeInterVal = ''

const getCodeBtn = () => {
    loadingBtnFlag.value = true
    if (timeInterVal) {
        clearInterval(timeInterVal)
    }
    timeInterVal = setInterval(() => {
        timeOut.value -= 1
        btnText.value = `${timeOut.value}s`
        if (timeOut.value <= 0) {
            btnText.value = '获取验证码'
            timeOut.value = 60
            clearInterval(timeInterVal)
            loadingBtnFlag.value = false
        }
    }, 1000)
}
</script>
<style scoped lang="scss"></style>
